<template>
	<view class="page" style="overflow-y: auto;">
		 <navigationBar :backIcon="false" :titleName="'用户登录'"></navigationBar>
		<view class="content">
			<view class="title" style="margin-top: 30rpx;"> 
				才能网旗下产品-才能招标
			</view>
			<view class="title">
				 
				全面、精准、便捷的招投标信息查询平台
				 
			</view>
			<view class="logo">
				<image :lazy-load="true" src="../static/images/logo/logo.png"></image>
			</view>
			
			<!-- v-if="platform!='wechatMiniApp'" -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="" >
				<view class="list" v-if="agree">
					<view class="item">
						<iconfont type="mobile"></iconfont>
						<input class="input" v-model="mobile" type="number" maxlength="11" placeholder="请输入手机号" />
					</view>
					<view class="item">
						<iconfont type="pwd"></iconfont>
						<input class="input" v-model="password" type="text" maxlength="32" placeholder="请输入密码"
							password="true" />
					</view>
				</view>
				
				
				
				<view class="button" hover-class="button-hover" @tap="bindLogin"  v-if="agree"><text>登录</text></view>
				<view class="other"  v-if="agree">
					<navigator url="forget" open-type="navigate">忘记密码</navigator>
					<text>|</text>
					<navigator url="register" open-type="navigate">注册账户</navigator>
				
					<!-- <text>|</text> -->
					
				</view>
				
				
				 
				
				
				<!-- #ifdef APP-PLUS -->
				<view class="wxbutton" v-show="agree">
					<view>------第三方账号登录------</view>
					<view  v-show="agree" class="iosView">
						<fh-apple-login    @afterAppleLogin="afterAppleLogin" ></fh-apple-login>
						 
					</view>
					<view>
						<uni-icons type="weixin" size="48" color="#07c160"  @click="onBindWX"></uni-icons>
						
					</view>
					
					
					
					
					<!-- <image class="logo_icon" src="/static/images/icon_wechat.png" mode="aspectFit"></image>  -->
				</view>
				
				
				
				<!-- #endif -->
				
				<!-- #ifdef MP-WEIXIN -->
				<view class="" v-if="agree">
					
					<view class="button" hover-class="button-hover" @tap="swichLoginWay()" ><text>返回微信登录</text></view>
				</view>
				<!-- #endif -->
				
				 
				
				
				<view class="bots" >
					<view class="reply-box" v-if="!agree">
						<view class="triangle"></view>
						<view class="u-m-t-10">
							点击同意
						</view>
					</view>
				
					<!-- <image class="sel-icon"
						:src="isSelect?'/static/images/login/sel-s.png':'/static/images/login/sel-n.png'" mode="aspectFit"
						></image> -->
					<view class="agreeBox">
						<checkbox-group @change="checkboxChange">
							<label>
								<checkbox value="1" color="#00aa8f" />
								同意
								<text @tap.stop="onInfo('privacy')" space="nbsp"
									style="font-size: 30rpx;color: #FF2828;">《隐私声明》</text> 和
								<text @tap.stop="onInfo('service')" space="nbsp"
									style="font-size: 30rpx;color: #FF2828;">《用户服务协议》</text>
							</label>
						</checkbox-group>
				
				
					</view>
					
				
				</view>
			</view>
			<!-- #endif  -->
			<!-- #ifdef MP-WEIXIN -->
			
			<view class="" v-if="platform=='wechatMiniApp'">
				<view class="" v-if="">
					<navigator class="button" url="/pagesCommon/miniAppLogin" >微信登录</navigator>
				</view>
				
				<!-- <view class="" >
					<view class="button" hover-class="button-hover" @tap="swichLoginWay()" ><text>切换到手机账号登录</text></view>
					
				</view> -->
			</view>
			<!-- #endif -->
			
				
				<!-- <view class="button2" @click="goHome">
					<uni-icons type="home" size="20" color="#757575"></uni-icons>
					回到首页
				</view> -->
		
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import iconfont from '@/components/iconfont/iconfont.vue';
	import validator from '@/common/validator';
	export default {
		components: {
			iconfont
		},
		data() {
			return {
				mobile: '',
				password: '',
				originUrl: '',
				hasLogin: false,
				//记录用户是否同意了用户协议
				agree:false,
				platform:null
			};
		},
		onUnload() {
			if (this.originUrl.search('/pagesCommon/login') != '-1') {
				uni.reLaunch({
					url: '../index/index'
				});
			}
		},
		onShow() {

		},
		onLoad(e) {
			// 判断当前是那个平台
			this.platform = this.$app.getPlatform(); 
			//console.log("当前平台是+++++++++++++++++++++",this.platform,'wechatMiniApp')
			
			let loginOriginUrl = uni.getStorageSync('loginOriginUrl');
			if (loginOriginUrl) {
				this.originUrl = loginOriginUrl;
				setTimeout(() => {
					uni.removeStorageSync('loginOriginUrl');
				}, 1000);
				console.log(this.originUrl);
			}

			
			this.tipUser()
		},
		computed: mapState(['isLogin']),
		methods: {
			...mapMutations(['login']),
			
			
			//苹果用户登录
			afterAppleLogin(e){
				uni.showLoading({
					title:'请稍候...'
				})
				console.log(e);
				let url = this.$baseApp.api.user.iosLogin ;
				this.$http.post(url,e).then(res=>{
					//console.info("res---->",res);
					if(res.code==200){
						
						if(res.data==1){//需要绑定手机
							uni.setStorageSync("openId_ios",e.openid);
							uni.hideLoading(); 
							uni.navigateTo({
								url:'/pagesUser/bindMailbox_IOS',
								fail(e) {
									console.info(e)
								}
							})
						}else{
							//已经绑定手机,直接登录
							this.login(res.data);
							uni.setStorageSync('isLogin', '1');
							
							uni.hideLoading();
							this.goHome()
						}
						
						
						return;
					}
					
				} )
				uni.hideLoading();
			},
			
			
			//app绑定微信
			onBindWX() {
				console.info("========")
				let this_ = this;
				uni.showLoading({
					mask:true,  
					title:'正在拉起微信登录'  
				}) 
				
				setTimeout(()=>{
					uni.hideLoading(); 
				},2000) 
				
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						//uni.hideLoading(); 
						
						console.info("========",loginRes)
						// //////console.log(loginRes.authResult);
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								console.log('用户昵称为：' + JSON.stringify(infoRes.userInfo));
								console.log("infoRes==============",infoRes)
								//用户昵称为：{"openId":"onhbI6NBD32hGvhOtmEi0LLheCXY","nickName":"老李头","gender":0,"city":"","province":"","country":"","avatarUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTI5MY5LmAicibMiaHD2tsu7HQnPDqcXNANr120soWqLeaUObiaJjBgIBDRdaWmdSrK5icib4CXuicyiauZ07Q/132","unionId":"o9d_gwO_QukPuWR9n2Sow_MgTcTc"}
								//this_.bindWx(loginRes.authResult.openid, infoRes.userInfo);
								
								this_.$app.request({
									url: this_.$baseApp.api.user.loginByWeixin,
									data: infoRes.userInfo,
									method: 'POST',
									dataType: 'json',
									success: res => {
										if (res.code == 200) {
											/*隐藏加载框*/
											//uni.hideLoading();
											
											/*更新登录状态,保存用户数据*/
											this_.hasLogin = true;
											this_.login(res.data);
											uni.setStorageSync('isLogin', '1');
											uni.setStorageSync('source', 'login');
											  
											this_.goHome()
										} else {
											this_.$alert(res.msg);
										}
									},
									fail: err => {
										this_.$alert(err.msg);
										/*隐藏加载框*/
										uni.hideLoading();
									},
									complete: res => {
										
									}
								});
							},
							complete() {
								//不管是否拉起微信,都要隐藏loading
								//uni.hideLoading();  
							}
						});
					},
					fail(err) {
						console.log(err)
					},
					complete(e) {
						console.log(e)
						//uni.hideLoading();  
					}
				});
				 
				 
			},
			
			checkboxChange(e) {
				let values = e.detail.value;
				 
				if(values[0]==1){
					this.agree=true
					
					// #ifdef APP-PLUS
					this.loginForOne();
					// #endif
					
					
				}else{
					this.agree=false
					this.tipUser()
					
				}
				console.log("this.agree",this.agree)
			},
			// 切换登录方式
			swichLoginWay(){
				if(this.platform=="wechatMiniApp"){
					this.platform=null
					this.agree=false
				}else{
					this.platform="wechatMiniApp"
				}
			},
			
			// 提示用户同意协议
			tipUser(){
				//this.$alert("请勾选同意《才能招标用户服务协议及隐私声明》,经您同意之后才能进行登陆");
			},
			// 跳转至用户协议页面
			onInfo(type) {
				console.log("用户协议")
				uni.navigateTo({
					url: '/pagesUser/agreement?type='+type
				});
				
			},
			bindLogin() {
				if (!validator.checkMobile(this.mobile)) {
					return;
				} else if (this.password == '') {
					this.$alert('请输入密码');
					return;
				}
				uni.showLoading({
					title: '登录中…'
				});
				this.$app.request({
					url: this.$baseApp.api.user.login,
					data: {
						phone: this.mobile,
						password: this.password
					},
					method: 'POST',
					dataType: 'json',
					success: res => { 
						if (res.code == 200) {
							/*隐藏加载框*/
							uni.hideLoading();
							
							/*更新登录状态,保存用户数据*/
							this.hasLogin = true;
							this.login(res.data);
							uni.setStorageSync('isLogin', '1');
							uni.setStorageSync('source', 'login');
							// 将手机号保存至本地
								uni.setStorageSync('phone',this.mobile);
							/*登录后跳转*/
							console.log(this.originUrl);
							
							
							/* if (this.originUrl) {
								uni.navigateTo({
									url:this.originUrl,
									fail() {
										uni.switchTab({
											url: '/pages/article/index'
										});
									}
								})
							} else {
								 
								uni.switchTab({
									url: '/pages/article/index'
								});
								 
							} */
							// uni.switchTab({
							// 	url: '/pages/customMade/customMade'
							// });
							
							this.goHome()
						} else {
							this.$alert(res.msg);
						}
					},
					fail: err => {
						this.$alert(err.msg);
						/*隐藏加载框*/
						uni.hideLoading();
					},
					complete: res => {
						/*隐藏加载框*/
						uni.hideLoading();
					}
				});
			},
			goHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
				setTimeout(() => {
				
					uni.$emit('dataFlash')
				
				}, 3000)
				
			},

			//一键登录
			loginForOne() {
				uni.showLoading({
					title: "请稍候...."
				});
				let that = this;
				uni.preLogin({ // 该函数是判断当前设备环境是否支持一键登录，
					provider: 'univerify',

					success() {
						
						console.info('一键登录开始')
						// 一键登录
						uni.login({
							provider: 'univerify',
							univerifyStyle: { // 自定义登录框样式
								//参考`univerifyStyle 数据结构`
								// fullScreen: true
								"privacyTerms": {
									"defaultCheckBoxState": false, // 条款勾选框初始状态 默认值： true
									"checkBoxSize": 14, // 可选 条款勾选框大小，仅android支持
								},
							},
							success(res) { // 登录成功
								//////console.log(res.authResult);  // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
								that.access_token = res.authResult.access_token;
								that.openid = res.authResult.openid;
								//////console.log(this.access_token);  // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
								// 在得到access_token后，通过callfunction调用云函数
								//let curDevice = base.getCurDevice() ;
								uniCloud.callFunction({
									name: 'phoneLogin', // 你的云函数名称
									data: {
										'access_token': res.authResult
											.access_token, // 客户端一键登录接口返回的access_token
										'openid': res.authResult.openid // 客户端一键登录接口返回的openid
									}
								}).then(res => {
									console.log(res)
									if(res.result.data.code==200){
										/*更新登录状态,保存用户数据*/
										that.hasLogin = true;
										that.login(res.result.data.data);
										uni.setStorageSync('isLogin', '1');
										
										uni.closeAuthView();
										that.goHome();
									}else{
										that.$alert('登录失败,请选择其他方式登录');
									}
									

									//////console.log("data",forOneData)
									/* uni.request({
									method: 'post',
									url: path,
									data: forOneData,
									header: {
										'Content-Type': 'application/x-www-form-urlencoded'
									},
									dataType: "json",
									success: (res) => {
										uni.hideLoading();
										//////console.log("接口返回数据",res)
										//uni.setStorageSync('phone',forOneData.phone);
			
										//登录token
										that.$Global.actions.loginToken(res);
			
										//uni.setStorageSync('uid', res.data.data); 
										uni.closeAuthView();
										that.$Global.tool.reLaunch(
											'/pages/stuff/stuff-index/stuff-index', 500);
			
									},
									fail: (err) => {
										//////console.log("调用失败",err)
										uni.hideLoading();
									}
			
								}) */

								}).catch(err => {
									console.log("错误信息1", err)
									uni.hideLoading();
								})


							},
							fail(res) { // 登录失败
								//that.$alert("请勾选同意《才能网用户服务协议及隐私声明》,经您同意之后才能进行登陆");
								setTimeout(() => {
									uni.hideLoading();
									uni.closeAuthView();
								}, 2000);




							},
							complete() {
								uni.hideLoading();
							}
						})
					},
					fail(res) {
						uni.hideLoading();
						//////console.log("错误信息2",res)
						//that.$alert("请勾选同意《才能网用户服务协议及隐私声明》,经您同意之后才能进行登陆");
					},
					complete(comp) {
						console.info(comp);
					}

				})

			}
		}
	};
</script>

<style lang="scss">
	.uni-list-cell {
		justify-content: flex-start
	}

	.content {
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		.title{
			text-align: center;
			font-size: 36rpx;
			color: #818181;
		}

		.logo {
			margin-top: 43rpx;
			margin-bottom: 43rpx;
			margin-left: auto;
			margin-right: auto;

			image {
				height: 225rpx;
				width: 225rpx;
			}
		}

		.list {
			display: flex;
			flex-direction: column;
			padding-top: 60rpx;
			padding-left: 100rpx;
			padding-right: 100rpx;

			.item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				border-bottom: 1upx solid rgba(230, 230, 230, 1);

				.icon {
					color: #ababab;
					margin-right: 5rpx;
					font-size: 40rpx;
				}

				.input {
					flex: 1;
					text-align: left;
					font-size: 30rpx;
					margin-left: 16rpx;
				}
			}
		}

		.button {
			margin-top: 100rpx;
		}
		
		.button2{
			margin: 20rpx auto;
			border: 1px solid #a8a8a8;
			border-radius: 20rpx;
			width: 200rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			color: #757575 ;
		}

		.other {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			margin-top: 60rpx;
			color: #8cc7b5;
			text-align: center;
			height: 40rpx;
			line-height: 40rpx;

			text {
				font-size: 24rpx;
				margin-left: 15rpx;
				margin-right: 15rpx;
			}
		}
		// .fixedPosition{
		// 	position: fixed;
		// 	bottom: 2%;
		// 	left: 0;
			
			.bots {
			
				box-sizing: border-box;
				padding:100rpx 60rpx;
				font-family: PingFang-SC-Medium;
				font-size: 28rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 44rpx;
				letter-spacing: -1rpx;
				color: #999999;
			
				.reply-box {
					margin-bottom: 20rpx;
					width: 130rpx;
					height: 50rpx;
					color: #F0F0F0;
					position: relative;
					background-color: #243744;
					border-radius: 6rpx;
					// box-shadow: -1rpx -1rpx 1rpx rgba($color: #000000, $alpha: 0.16);
					filter: drop-shadow(0 0 6rpx rgba($color: #000000, $alpha: 0.16));
					text-align: center;
			
					/*画三角形*/
					.triangle {
						border-left: 10px solid transparent;
						border-right: 10px solid transparent;
						border-top: 10px solid #243744;
						/*我们一般根据方向来写三角形，这样容易记忆；箭头指向的反方向的颜色设置为你想要的，然后箭头方向不要写，另外两个方向的颜色设置为transperent透明*/
						position: absolute;
						top: 45rpx;
						left: 25rpx;
						margin-left: -10px;
					}
			
					animation: opacityC 1s linear infinite;
				}
			
			}
		// }
		
	}
	.wxbutton{
		margin: 10px auto;
		color: #afafaf; 
		min-height: 100rpx; 
		text-align: center;
		.logo_icon{
			margin-top: 20rpx;
			width: 80rpx;
			height: 80rpx;
		}
		.iosView{
			margin-top: 20rpx;
			margin-left: 200rpx;
		}
		 
	}
	
</style>
